<template>
  <div class="sanstyle" style="position: relative">
    <!--左边-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">{{animalName}}各海拔采集照片/视频</span>
            <br/>
            <span class="xwz">Photos/videos of all altitudes are collected</span>
          </div>
        </div>
        <!--标题 E-->

        <!--调查次数B-->
        <div class="tccs">
          <div>
            <div><span style="color: white;font-size: .18rem;">照片数量</span></div>
            <div><span style="color: #2EFFF2;font-size: .36rem;">{{photoFenLei.photo}}</span><span
              style="color: white;font-size: .18rem;">次</span>
            </div>
            <div><img src="/static/images/zhaopian.png" alt=""></div>
          </div>
          <div>
            <div><span style="color: white;font-size: .18rem;">视频数量</span></div>
            <div><span style="color: #34CEFF;font-size: .36rem;">{{photoFenLei.video}}</span><span
              style="color: white;font-size: .18rem;">次</span>
            </div>
            <div><img src="/static/images/shipin.png" alt=""></div>
          </div>


        </div>
        <!--调查次数E-->

        <div style="width: 100%;height: 100%;position: relative">
          <div id="bar1"
               style="position:absolute;left: -.4rem;width: calc(100% + .4rem);height: calc(100% - 2.5rem)"></div>
        </div>


      </div>
    </div>
    <!--左边-->
    <!--中间-->
    <div style="position: relative">
      <div class="bzxq">
        <div v-for="(item,index) in tclist" :key="index">
          <div><img :src="item.ico" alt=""></div>
          <div>
            <span :style="{color: item.color}">{{item.num}}</span>
            <br/>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <!--分布类型 B-->

      <div class="xjfb" @click="isshowxj" style="width: 1.6rem; left: .34rem;">
        <div :style="isxj?'opacity: 1':'opacity: .6'">
          <img style="width: .15rem;height: .15rem;"
               src="/static/images/huangdian.png" alt="">
          <span>{{kw}}相机分布</span>
        </div>
      </div>

      <div class="xjfb" style="width: 1.6rem; left:2.1rem;padding-left: .1rem;">
        <div>
          <img style="width: .15rem;height: .15rem;"
               src="/static/images/hongdian.png" alt="">
          <el-select v-model="animalName" @change="dxwuzhong" placeholder="请选择">
            <el-option
              v-for="item in wuzhong"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!--分布类型 E-->
      <!--tab切换 B-->
      <div class="qhtab" style="top: 1.6rem;left: .34rem">
        <div v-for="(item,index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="item.sts?'/static/images/tab1.png':'/static/images/tab2.png'" alt="">
          <span style="margin-left: .08rem;">{{item.name}}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <!--中间地图 B-->
      <div id="map" style="height: 75%;width: 100%;margin-top: 15%;"></div>
      <!--中间地图 E-->
      <div class="shijianzhoubox">
        <div style="width: 100%;height: 100%;overflow: hidden" id="sjc"></div>
      </div>
    </div>
    <!--中间=-->
    <!--右边D-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">{{animalName}}各时间采集照片/视频</span>
            <br/>
            <span class="xwz">Collect photos/videos at all times</span>
          </div>
        </div>
        <!--标题 E-->

        <div class="glsj">
          <div>
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">各时拍摄照片/视频</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Take photos/videos at different times</span>
            </div>
            <div style="height: calc(100% - .6rem);width: 100%;"
                 id="bar2"></div>
          </div>
          <div>
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">平均每月拍摄照片/视频数</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Average number of photos/videos taken per month</span>
            </div>
            <div style="height: calc(100% - .6rem);width: 100%;"
                 id="bar3"></div>
          </div>
        </div>

      </div>
    </div>
    <!--右边D-->


    <div class="zhezhao" v-if="isShow">
      <div>
        <div class="closei">
          <img style="width: 100%;height: 100%;" @click="clearLove"
               src="/static/images/guanbi.png" alt="">
        </div>
        <div class="xuanzhuan" v-if="isMp4(lovePhoto)=='照片'">
          <img style="width: 100%;height: 100%;" @click="xuanzhaun"
               src="/static/images/xuanzhuan.png" alt="">
        </div>

        <!--图片 B-->
        <div class="imgBox" id="imgBox">
          <img id="pcr" :src="lovePhoto" v-if="isMp4(lovePhoto)=='照片'" alt="">
          <video style="max-width: 100%;max-height: 100%" :src="lovePhoto" v-if="isMp4(lovePhoto)=='视频'"
                 controls="controls"></video>
        </div>
        <!--图片 E-->

        <!--轮播图 B-->
        <div class="lbxtimg">
          <!--左边B-->
          <div class="jianmotua">
            <img @click="lmv" src="/static/images/leftjiantou.png" alt="">
          </div>
          <!--左边E-->

          <!--l轮播图容器 B-->
          <div class="lbtbox">
            <ul class="clearfix" id="imgul" :style="{width:2.3*imglist.length+'rem' }">
              <li v-for="(item,index) in imglist" :key="index"
                  :style="item.fill?'border: 2px solid #2EFFF2;':'border:none'" @click="xbdimg(item)">
                <img :src="iscloud(item.url)" v-if="isMp4(item.url)=='照片'" alt="">
                <img src="/static/images/video.jpg" v-if="isMp4(item.url)=='视频'" alt="">
              </li>
            </ul>
          </div>
          <!--l轮播图容器 E-->

          <!--右边B-->
          <div class="jianmotua" @click="rmv">
            <img src="/static/images/rightjainotu.png" alt="">
          </div>
          <!--右边E-->
        </div>
        <!--轮播图 E-->


      </div>
    </div>

  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import http from '../utils/http'
  import api from '../utils/api'

  export default {
    name: "hwxj",
    data() {
      return {
        aike: "",
        wuzhong: [],
        animalName: '',
        photoFenLei: {
          photo: 0,
          video: 0
        },
        kw: '全部',
        fbList: [
          {
            name: "相机分布",
            ico: '/static/images/huangdian.png',
            sts: true
          },
          {
            name: "活动范围",
            ico: '/static/images/hongdian.png',
            sts: true
          }
        ],
        tclist: [
          {
            ico: '/static/images/hw1.png',
            name: '布设人员(人)',
            num: 642,
            color: '#2EFFF2'
          }, {
            ico: '/static/images/hw2.png',
            name: '布设次数(次)',
            num: 385,
            color: '#FFF27F'
          }, {
            ico: '/static/images/hw3.png',
            name: '布设相机(台)',
            num: 836,
            color: '#917FFF'
          }, {
            ico: '/static/images/hw4.png',
            name: '拍摄数据(条)',
            num: 170,
            color: '#34CEFF'
          },
        ],
        areaId: "",
        fb: [],
        fenbu: [],
        fw: [],
        fanwei: [],
        navList: [
          {
            name: '功能区划',
            type: 'gnqh',
            sts: true
          },
          {
            name: '网格',
            type: 'wg',
            sts: false
          }
        ],
        maptype: "gnqh",
        imglist: [],
        idx: 0,
        xz: 0,
        isShow: false,
        lovePhoto: "",
        isxj: true,
        bhqName: [],
        MapColor: [
          'rgba(203, 255, 252, 0.8)',
          'rgba(74, 239, 230, 0.8)',
          'rgba(4, 178, 169, 0.8)',
          'rgba(203, 255, 252, 0.8)',
          'rgba(114,8,82,.8)',
          'rgba(174,213,13,.8)',
          'rgba(194,133,112,.8)',
          'rgba(225,66,19,.8)',
          'rgba(94,60,190,.8)',
          'rgba(253,166,199,.8)'
        ]
      }
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');
      this.getlcc();
    },
    mounted() {
      this.getcyv();
      let vm = this;
      (async function f() {
        let res = await http.get('/papi/' + vm.areaId + '_json/gnqh.json')
        let arr = [];
        res.data.features.forEach(t => {
          arr.push(t.properties.name)
        })
        vm.bhqName = arr;
        vm.getwuzhong();
      })();
      const _that = this
      window.onresize = () => {
        return (() => {
          let maxWidth = $('#imgBox').width();
          let maxHeight = $('#imgBox').height();
          let path = $('#pcr').attr('src');
          _that.AutoSize(path, maxWidth, maxHeight);
        })()
      }
    },
    methods: {
      isshowxj() {
        this.isxj = !this.isxj
        let url = '', geo = {}, jsondata = [], e = ['实验区', '缓冲区', '核心区'];
        if (this.maptype == 'gnqh') {
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          url = '/papi/' + this.areaId + '_json/gnqh.json';
        }
        if (this.maptype == 'wg') {
          geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          url = '/papi/' + this.areaId + '_json/wangge.json';
        }
        if (this.isxj) {
          this.fw = this.fanwei
        } else {
          this.fw = []
        }
        this.map(url, geo, this.fb, this.fw);
      },
      clearLove() {
        this.idx = 0;
        this.xz = 0;
        this.isShow = false;
      },
      xuanzhaun() {
        this.xz++;
        $("#pcr").css({transform: 'rotate(' + (this.xz * 90) + 'deg)'})
      },
      xbdimg(data) {
        this.imglist.forEach(e => {
          if (e.url == data.url) {
            e.fill = true
          } else {
            e.fill = false
          }
        })
        this.lovePhoto = data.url;
        this.xz = 0;
        $("#pcr").css({transform: 'rotate(0deg)'})
        let vm = this;
        setTimeout(function () {
          let maxWidth = $('#imgBox').width();
          let maxHeight = $('#imgBox').height();
          let path = $('#pcr').attr('src');
          vm.AutoSize(path, maxWidth, maxHeight);
        }, 500)
      },
      lmv() {
        let target = $('#imgul'), vm = this;
        if (this.idx < (this.imglist.length - 4)) {
          vm.idx++;
          target.stop().animate({left: (-vm.idx * 2.3) + .4 + "rem"}, 500)
        }
      },
      rmv() {
        let target = $('#imgul'), vm = this;
        if (this.idx > 0) {
          vm.idx--;
          target.stop().animate({left: -vm.idx * 2.3 + "rem"}, 500)
        }
      },
      AutoSize(Img, maxWidth, maxHeight) {
        let image = new Image();
        image.src = Img;
        image.onload = function () {
          if (image.width < maxWidth && image.height < maxHeight) {
            $("#pcr").css({width: image.width, height: image.height})
          } else {
            if (maxWidth / maxHeight <= image.width / image.height) {
              $("#pcr").animate({width: maxWidth, height: maxWidth * (image.height / image.width)}, 'fast');
            } else {
              $("#pcr").animate({width: maxHeight * (image.width / image.height), height: maxHeight}, 'fast');
            }
          }
        }
      },
      isMp4(m) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      },
      iscloud(p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|150h'
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_150,m_lfit'
        }
      },
      getcyv() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.cameraYearView + vm.areaId)
          if (res.data.code == '200') {
            let x = [], y = [];
            res.data.data.forEach(t => {
              x.push(t.year);
              y.push(t.number)
            })
            vm.sjc(x, y);
          }
        })();
      },
      datamap(flag) {
        if (this.isxj) {
          this.fw = this.fanwei
        } else {
          this.fw = []
        }
        this.navList.forEach(e => {
          if (flag == e.type) {
            e.sts = true
          } else {
            e.sts = false
          }
        })
        if (flag == 'gnqh') {
          let url = '/papi/' + this.areaId + '_json/gnqh.json';
          let jsondata = []
          let e = ['实验区', '缓冲区', '核心区']
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          let geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          this.map(url, geo, this.fb, this.fw)
        }
        if (flag == 'wg') {
          let geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          let url = '/papi/' + this.areaId + '_json/wangge.json';
          this.map(url, geo, this.fb, this.fw)
        }
      },
      map(url, geo, fenbu, fanwei) {
        let vm = this
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        $.getJSON(url, function (geoJson) {
          echarts.registerMap('GeoJson', geoJson);
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          setTimeout(function () {
            let option = {
              geo: geo,
              series: [
                {
                  name: "点位",
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol: 'pin',
                  legendHoverLink: true,
                  symbolSize: [30, 30],
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        color: '#fff',
                        fontSize: 9,
                      },
                      formatter(value) {
                        return value.data.sum
                      }
                    }
                  },
                  data: fenbu,
                  itemStyle: {
                    normal: {
                      color: '#FE4141', //标志颜色
                    }
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke',
                  },
                  hoverAnimation: true,
                  zlevel: 2,
                },
                {
                  name: "分布",
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol: 'circle',
                  symbolSize: [10, 10],
                  data: fanwei,
                  itemStyle: {
                    normal: {
                      color: '#FFF500', //标志颜色
                    }
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke',
                  },
                  hoverAnimation: true,
                  zlevel: 1,
                }
              ]
            }
            myChart.hideLoading();
            myChart.setOption(option, true);
            myChart.resize();
          }, 1000);

          ///3、在渲染点击事件之前先清除点击事件
          myChart.off('click')
          myChart.on('click', function (params) {
            if (params.componentSubType == "scatter") {
              if (params.seriesName == '点位') {
                vm.opendwimg(params);
              }
            }
          });

          window.addEventListener("resize", function () {
            myChart.resize();
          })
        });
      },
      filteryType(e) {
        if (e == '实验区') {
          return 'rgba(203, 255, 252, 0.8)'
        }
        if (e == '缓冲区') {
          return 'rgba(74, 239, 230, 0.8)'
        }
        if (e == '核心区') {
          return 'rgba(4, 178, 169, 0.8)'
        }
        return 'rgba(203, 255, 252, 0.8)'
      },
      opendwimg(params) {
        let _that = this, arr = [];
        (async function f() {
          let res = await http.get(api.getMedias + _that.areaId + '&name=' + _that.animalName + '&lon=' + params.data.value[0] + '&lat=' + params.data.value[1])
          if (res.data.data.length > 0) {
            res.data.data.forEach(t => {
              let z = {
                fill: false,
                url: t.accessorySrc
              }
              arr.push(z)
            })
            arr[0].fill = true;
            _that.lovePhoto = arr[0].url;
            _that.imglist = arr;
            setTimeout(function () {
              _that.isShow = true;
              setTimeout(function () {
                let maxWidth = $('#imgBox').width();
                let maxHeight = $('#imgBox').height();
                let path = $('#pcr').attr('src');
                _that.AutoSize(path, maxWidth, maxHeight);
              }, 500)
            }, 500)
          } else {
            _that.$message({
              message: '该点位暂无图像资料,请尽快补充',
              type: 'warning'
            });
          }
        })()
      },
      getlcc() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.layCameraEnvirCount + vm.areaId)
          vm.tclist[0].num = res.data.layRenyuan;
          vm.tclist[1].num = res.data.layNum;
          vm.tclist[2].num = res.data.layingCamera;
          vm.tclist[3].num = res.data.dataNum;
        })()
      },
      getwuzhong() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.totalCount + vm.areaId)
          let arr = [];
          res.data.wuzhong.forEach(e => {
            let z = {
              value: e,
              label: e
            }
            arr.push(z)
          })
          vm.wuzhong = arr;
          vm.animalName = res.data.wuzhong[0];
          vm.getCount(vm.aike);
        })()
      },
      dxwuzhong() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.animalCount + vm.areaId + '&timeStr=' + vm.aike + '&animalName=' + vm.animalName)
          vm.photoFenLei.photo = res.data.photoFenLei.photo;
          vm.photoFenLei.video = res.data.photoFenLei.video;
          let hx = [], hy = [];
          for (let key in res.data.haibaCount) {
            hx.push(key);
            hy.push(res.data.haibaCount[key])
          }
          vm.drawbar1(hx, hy);
          let sx = [], sy = [];
          for (let key in res.data.dayShootTimeCount) {
            sx.push(key);
            sy.push(res.data.dayShootTimeCount[key])
          }
          vm.drawbar2(sx, sy);
          let mx = [], my = [];
          for (let key in res.data.monthShootTimCount) {
            mx.push(key);
            my.push(res.data.monthShootTimCount[key])
          }
          vm.drawbar3(mx, my);
          let arr = [];
          res.data.fenbu.forEach((e, index) => {
            // if (index < 100) {
            let z = {value: [e[0], e[1]], sum: e[2]}
            arr.push(z)
            // }
          });
          vm.fb = arr;
          vm.datamap(vm.maptype);
        })();
      },
      getCount(time) {
        let vm = this;
        (async function f() {
          let res = await http.get(api.animalCount + vm.areaId + '&timeStr=' + time + '&animalName=' + vm.animalName)
          vm.photoFenLei.photo = res.data.photoFenLei.photo;
          vm.photoFenLei.video = res.data.photoFenLei.video;
          let hx = [], hy = [];
          for (let key in res.data.haibaCount) {
            hx.push(key);
            hy.push(res.data.haibaCount[key])
          }
          vm.drawbar1(hx, hy);
          let sx = [], sy = [];
          for (let key in res.data.dayShootTimeCount) {
            sx.push(key);
            sy.push(res.data.dayShootTimeCount[key])
          }
          vm.drawbar2(sx, sy);
          let mx = [], my = [];
          for (let key in res.data.monthShootTimCount) {
            mx.push(key);
            my.push(res.data.monthShootTimCount[key])
          }
          vm.drawbar3(mx, my);
          let arr = [];
          res.data.fenbu.forEach((e, index) => {
            // if (index < 100) {
            let z = {value: [e[0], e[1]], sum: e[2]}
            arr.push(z)
            // }
          });
          vm.fb = arr;
          (async function f() {
            let res = await http.get(api.cameraLayFenbu + vm.areaId + '&timeStr=' + time)
            let arr = [];
            res.data.forEach((e, index) => {
              // if (index < 100) {
              let z = {value: [e[0], e[1]]}
              arr.push(z)
              // }
            });
            vm.fanwei = arr;
            vm.datamap(vm.maptype);
          })();
        })();
      },
      sjc(x, y) {
        let vm = this;
        let myChart = echarts.getInstanceByDom(document.getElementById("sjc"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("sjc"));
        }
        let ins = null
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            bottom: '25%',
            top: "12%",
            right: '2%',
            left: '2%'
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#2EFFF2'
              }
            },
            data: x,
            triggerEvent: true
          },
          yAxis: {
            type: 'value',
            show: false,
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '照片/视频',
              data: y,
              barWidth: 12,
              type: 'bar',
              itemStyle: {
                normal: {
                  color: function (params) {
                    if (params.dataIndex == ins) {
                      return 'rgba(61, 39, 202, 1)';
                    } else {
                      return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#FF3465'},
                        {offset: 1, color: '#2EFFF2'}
                      ])
                    }
                  }
                }
              },

            }
          ]
        };
        myChart.clear();
        myChart.on('click', function (param) {
          if (param.componentType == "xAxis") {
            if (ins == param.dataIndex) {
              ins = null;
              vm.kw = '全部';
              vm.aike = '';
              vm.getCount(vm.aike)
            } else {
              ins = param.dataIndex
              vm.kw = param.value + '年';
              vm.aike = param.value
              vm.getCount(vm.aike)
            }
          }
          myChart.setOption({
            xAxis: [
              {
                axisLabel: {
                  color: function (value, index) {
                    return index == ins ? 'rgba(61, 39, 202, 1)' : '#2EFFF2';
                  }
                }
              }
            ],
          });
          myChart.setOption(option);
        });

        myChart.setOption(option, true);
        setTimeout(function () {
          myChart.resize();
        }, 100)
      },
      qhfb(item) {
        item.sts = !item.sts;
        let url = '', geo = {}, jsondata = [], e = ['实验区', '缓冲区', '核心区'];
        if (this.maptype == 'gnqh') {
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          url = '/papi/' + this.areaId + '_json/gnqh.json';
        }
        if (this.maptype == 'wg') {
          geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          url = '/papi/' + this.areaId + '_json/wangge.json';
        }
        if (item.sts) {
          if (item.name == '相机分布') {
            this.fb = this.fenbu
          }
          if (item.name == '活动范围') {
            this.fw = this.fanwei
          }
        } else {
          if (item.name == '相机分布') {
            this.fb = []
          }
          if (item.name == '活动范围') {
            this.fw = []
          }
        }
        ;
        this.map(url, geo, this.fb, this.fw);
      },
      drawbar1(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar1'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar1'));
        }
        let option = {
          yAxis: {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: x,
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '5%',
            left: '20%',
            right: "5%",
            bottom: "5%"
          },
          series: [
            {
              data: y,
              type: 'bar',
              showBackground: true,
              label: {
                show: true,
                position: 'right',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(81, 37, 255, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 31, 152, 0.8)'
                    }
                  ])
                }
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 1)',
                opacity: .1
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar2(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar2'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar2'));
        }
        let option = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: "#fff",
            },
            data: x
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '5%',
            left: '10%',
            bottom: '10%',
            right: '5%'
          },
          series: [
            {
              data: y,
              type: 'line',
              lineStyle: {
                color: 'rgba(255, 233, 36, 0.7)'
              },
              itemStyle: {
                color: '#FFF27F'
              },
              symbolSize: 10,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 233, 36, 0.7)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 242, 127, 0)'
                  }
                ])
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar3(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar3'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar3'));
        }
        let option = {
            xAxis: {
              type: 'category',
              axisLabel: {
                textStyle: {
                  color: "#fff"
                }
              },
              axisTick: {
                //y轴刻度线
                show: false
              },
              data: x,
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                color: "#fff",
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.1)'
                }
              }
            }
            ,
            grid: {
              top: '13%',
              left:
                '10%',
              right:
                "1%",
              bottom:
                "22%"
            }
            ,
            series: [
              {
                data: y,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(255, 255, 255, 0.1)'
                },
                barWidth: 16,
                label: {
                  show: true,
                  position: 'top',
                  color: '#fff'
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: 'rgba(145, 127, 255, 0)'
                      },
                      {
                        offset: .8,
                        color: 'rgba(46, 12, 255, 0.8)'
                      },
                    ])
                  }
                }
              }
            ]
          }
        ;
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
    }
  }
</script>

<style scoped>
  @import "../../static/css/jbxx.css";
  @import "../../static/css/xxjc.css";
</style>
<style>
  .xjfb .el-input__inner {
    border: none !important;
    background: transparent;
    color: white;
  }

  .el-select-dropdown {
    border: 1px solid rgba(46, 205, 255, .6);
    background: rgba(1, 15, 27, .7);
  }

  .el-select-dropdown__item.selected {
    color: #2efff2;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    color: white;
  }

  .el-select-dropdown__item {
    color: #34ceff;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: rgba(46, 255, 242, 0.1);
  }

  .el-icon-warning {
    font-size: .14rem !important;
  }
</style>
